<script lang="ts" setup>
import { useDesignTheme } from '@/hooks/useDesignTheme'
import { useDesignStore, useInstStore } from '@/stores'
import { computed, type CSSProperties } from 'vue'
import { type SortableEvent, VueDraggable } from 'vue-draggable-plus'
import Render from '../Render/Render.vue'

defineOptions({
  name: 'Designer',
})

const { themes } = useDesignTheme()
const instStore = useInstStore()
const designStore = useDesignStore()
function handleAddComp(ev: SortableEvent) {
  // @ts-ignore
  if (ev.clonedData) {
    // @ts-ignore
    designStore.setActiveRender(ev.clonedData)
  }
}
function triggerPageAttr() {
  designStore.unsetActiveRender()
  if (designStore.config.attrToggler.clickRenderToOpen) {
    designStore.config.attrToggler.collapsed = false
  }
}

const style = computed<CSSProperties>(() => {
  return {
    '--design-theme-color': themes.value.themeColor,
    '--design-theme-color-light': themes.value.themeColorLight,
    '--design-theme-color-lightest': themes.value.themeColorLightest,
  }
})
</script>

<template>
  <div class="box-border bg-[#fafaff] min-h-screen designer" :class="[designStore.config.platform, designStore.attrTogglerOpened ? 'attrOpened' : '', designStore.asideTogglerOpened ? 'asideOpened' : '']">
    <!-- 移动版 -->
    <div class="mobile-viewport">
      <!-- 导航栏 -->
      <div class="flex flex-row items-stretch h-56px bg-white cursor-pointer" @click="triggerPageAttr">
        <div class="flex flex-row items-center flex-none px-4 cursor-pointer">
          <i class="i-ant-design:left-outlined w-4 h-4" />
        </div>
        <div class="flex-1 flex flex-row justify-center items-center">
          {{ instStore.detail?.name }}
        </div>
        <div class="flex-none flex flex-row justify-center items-center px-4 cursor-pointer">
          <i class="i-ant-design:menu-outlined w-4 h-4" />
        </div>
      </div>
      <!-- 主内容区 -->
      <VueDraggable
        v-model="designStore.renders" :animation="150" group="component"
        class="component-drop-area"
        ghost-class="designer-ghost"
        :style="style"
        @add="handleAddComp"
      >
        <Render v-for="(item, index) in designStore.renders" :key="item.id" :render="item" :render-index="index" />
      </VueDraggable>
    </div>
  </div>
</template>

<style lang="less" scoped>
.designer {
    line-height: 1;
    padding-left: 0;
    padding-top: calc(var(--app-nav-bar-height) + 48px);
    padding-bottom: 48px;
    &.attrOpened {
      padding-right: var(--app-aside-comp-attr-width);
    }
    &.asideOpened {
      padding-left: calc(var(--app-aside-bar-width) + var(--app-aside-bar-comps-width));
    }
  }
  
.mobile-viewport {
    width: 375px;
    margin: 0 auto;
    font-family: "Source Han Sans CN";
}

.component-drop-area {
  position: relative;
  background-color: var(--app-mobile-body-bg);
  min-height: 620px;
}
.designer.pc {
  width: max-content;
  .mobile-viewport {
    width: 1920px;
    margin: 0 20px;
  }
  .component-drop-area {
    min-height: 960px;
  }
}
</style>

<style lang="less">
.designer-ghost {
  border: 1px solid var(--app-color-primary);
  width: 375px !important;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
}
</style>
